<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>离线视频违章列表</title>
    <link rel="stylesheet" href="../../component/pear/css/pear.css"/>
    <style>
        .layui-table-tool{
            display: none;
        }
        .div-img{
            height: 500px;
        }
        .layui-tab-content{
            position: relative;
        }
        .div-img img{
            /*position:absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);*/
            max-width: 100%;
            max-height: 100%;
        }
    </style>
</head>
<body class="pear-container">
    <div class="layui-row">
        <div class="layui-card">
            <div class="layui-card-body">
                <form class="layui-form" action="">
                    <div class="layui-form-item">
                        <div class="layui-form-item layui-inline">
                            <label class="layui-form-label">违章分类</label>
                            <div class="layui-input-inline">
                                <input type="text" name="algorithmKind\@like" class="layui-input" id="algorithmKind" placeholder="" autocomplete="off">
                            </div>
                            <label class="layui-form-label">状态</label>
                            <div class="layui-input-inline">
                                <select name="state" lay-search="">
                                    <option value="">请选择</option>
                                    <option value="0">未确认</option>
                                    <option value="1">已确认</option>
                                    <option value="2">已消警</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item layui-inline">
                            <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="offline-query">
                                <i class="layui-icon layui-icon-search"></i>查询
                            </button>
                            <button type="reset" class="pear-btn pear-btn-md">
                                <i class="layui-icon layui-icon-refresh"></i>重置
                            </button>
                        </div>
                    </div>
                </form>
                <input hidden name="id" id="id" value="${id}">
                <table id="offline-table" lay-filter="offline-table"></table>
            </div>
        </div>
    </div>
    <script type="text/html" id="wzgl-bar">
        <button class="pear-btn pear-btn-md pear-btn-primary" lay-event="sh">
            <i class="layui-icon layui-icon-eye"></i>
            审核
        </button>
    </script>
    <script type="text/html" id="state">
        {{#if (d.state == 0) { }}
        <span>未确认</span>
        {{# }else if(d.state == 1){ }}
        <span>已确认</span>
        {{# }else if(d.state == 2){ }}
        <span>已消警</span>
        {{# } }}
    </script>
</body>

<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script>
    layui.use(['table', 'form', 'jquery', 'common', 'toast'], function () {
        let table = layui.table;
        let form = layui.form;
        let $ = layui.jquery;
        let common = layui.common;
        var toast = layui.toast;

        let MODULE_PATH = "${ctxPath}/offline/";

        let cols = [[
            {title: '违章分类', field: 'eventName', align: 'center'},
            {title: '施工单位', field: 'construction_name', align: 'center'},
            {title: '状态', field: 'state', align: 'center',templet:'#state'},
            {title: '时间', field: 'createTime', align: 'center'},
            {title: '操作', toolbar: '#wzgl-bar', align: 'center'}
        ]];

        table.render({
            elem: '#offline-table',
            url: MODULE_PATH + 'data/eventList?offline='+$("#id").val(),
            page: true,
            limit: 10,
            limits: [10,20,30,40,50],
            cols: cols,
            skin: 'line',
            toolbar: '',
            defaultToolbar: "",
            height: 'full-150'
        });

        table.on('tool(offline-table)', function(obj){
            if (obj.event === 'sh') {
                showSh(obj);
            }
        });

        form.on('submit(offline-query)', function (data) {
            table.reload('offline-table', {
                where: data.field,page: {curr: 1}
            });
            return false;
        });

        function showSh(obj) {
            console.log(obj);
            var id=obj.data.id;
            var shHtml = '<div class="layui-tab layui-tab-brief" style="width: 900px;height: 550px;padding: 0px 10px;overflow:hidden;"  lay-filter="">\n' +
                '  <ul class="layui-tab-title">\n' +
                '    <li class="layui-this">图片</li>\n' +
                '    <li>视频</li>\n' +
                '  </ul>\n' +
                '  <div class="layui-tab-content" style="padding-top: 15px">\n' +
                '    <div class="layui-tab-item layui-show div-img" id="photo-list"><img onclick="ck()" class="img1" src="'+obj.data.imagePath+'" onerror="javascript:this.src=\'${ctxPath}/static/resource/images/pic404.png\'"/></div>\n' +
                '    <div class="layui-tab-item"><video height="500" width="900" controls autoplay autobuffer loop><source src="'+obj.data.videoPath+'" type="video/mp4"></source></video></div>\n' +
                '  </div>\n' +
                '</div> ';
            layer.open({
                type: 1,
                btn: ['消警', '确认']
                , btn1: function (index) {
                    layer.confirm('确定要消警该条记录', {
                        icon: 3,
                        title: '提示'
                    }, function (index) {
                        $.ajax({
                            url: MODULE_PATH + "data/wzqr?id=" + id+"&state=2",
                            dataType: 'json',
                            type: 'post',
                            success: function (result) {
                                if (result.code == 0) {
                                    layer.msg("操作成功", {time: 1000, icon: 6});
                                    layer.close(index);
                                    table.reload('offline-table');
                                } else {
                                    layer.msg("操作失败", {time: 1000, icon: 6});
                                    layer.close(index);
                                    table.reload('offline-table');
                                }
                            }
                        })
                    });
                    layer.close(index);
                }
                , btn2: function (index) {
                    layer.open({
                        type: 2,
                        title: '人员违章扣分',
                        shade: 0.1,
                        area: [common.isModile() ? '100%' : '600px', common.isModile() ? '100%' : '450px'],
                        content: "${ctxPath}/wzgl/view/wzPoint?sj="+obj.data.createTime+"&wzid="+id+"&type=3"
                    });
                },
                shadeClose: true,
                scrollbar: false,
                title: "审核预览 - "+obj.data.eventName,
                content: shHtml
            })
        }

        window.ck=function (){
            layer.photos({
                photos: '#photo-list',
                shadeClose: false,
                closeBtn: 1,
                anim: 5
            });
        }
    });
</script>
</html>